<template>
  <div class="box-main">
    <div class="box-title">礼物收益</div>
    <div class="card m-b-5">
      <div class="card-list">
        <div class="card-list-item" v-for="v in list" :key="v.label">
          <div class="card-list-item-value">{{ v.value }}</div>
          <div class="card-list-item-label">{{ v.label }}</div>
        </div>
      </div>
      <div class="card-tabs">
        <div class="card-tabs-btn card-tabs-btn-active">本周</div>
        <div class="card-tabs-btn">本月</div>
      </div>
      <div id="myEcharts" style="width: 100%; height: 61.55vw;"></div>
    </div>
    <div class="box-title">观看数据</div>
    <div class="card">
      <div class="card-list">
        <div class="card-list-item" v-for="v in viewingDataList" :key="v.label">
          <div class="card-list-item-value">{{ v.value }}</div>
          <div class="card-list-item-label">{{ v.label }}</div>
        </div>
      </div>
      <div class="card-tabs">
        <div class="card-tabs-btn card-tabs-btn-active">本周</div>
        <div class="card-tabs-btn">本月</div>
      </div>
      <div id="viewingData" style="width: 100%; height: 61.55vw;"></div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';

const list = [
  { label: '今日礼物', value: 190 },
  { label: '本周礼物', value: 1325 },
  { label: '本月礼物', value: '1.4w' },
]

const viewingDataList = [
  { label: '今日观看', value: 190 },
  { label: '本周观看', value: 1325 },
  { label: '本月观看', value: '1.4w' },
]


const initEcharts = () => {
  const myChart = echarts.init(document.getElementById('myEcharts'));
  const option = {
    backgroundColor: 'transparent',
    legend: {
      show: false
    },
    tooltip: {
      show: false,
      trigger: 'item',
    },
    grid: {
      top: '3%',
      left: '3%',
      right: '3%',
      bottom: '15%',
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          show: false // 是否显示坐标轴轴线
        },
        axisLabel: {
          color: '#666666',
          fontSize: 12,
          interval: 0,
        },
        splitLine: {
          show: false
        },
        boundaryGap: true,
        axisLine: {
          show: false,
        }
      },
    ],
    yAxis: [
      {
        type: 'value',

        show: false,
      }
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barMaxWidth: 10,
        zlevel: 10,
        data: [160, 230, 265, 150, 220, 170, 190],
        label: {
          show: true,
          position: 'top',
          color: '#DC376B',
          fontSize: 12
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(231, 22, 107, 1)'
            }, {
              offset: 1,
              color: 'rgba(231, 22, 107, 0)'
            }]
          },
          borderRadius: [30, 30, 0, 0],
        },
      }
    ]
  };

  myChart.setOption(option)
  // 响应式resize
  const resizeHandler = () => myChart.resize()
  window.addEventListener('resize', resizeHandler)
}

const initViewingData = () => {
  const viewingData = echarts.init(document.getElementById('viewingData'))
  const option = {
    backgroundColor: 'transparent',
    legend: {
      show: false
    },
    tooltip: {
      show: false,
      trigger: 'item',
    },
    grid: {
      top: '3%',
      left: '3%',
      right: '3%',
      bottom: '15%',
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          show: false // 是否显示坐标轴轴线
        },
        axisLabel: {
          color: '#666666',
          fontSize: 12,
          interval: 0,
        },
        splitLine: {
          show: false
        },
        boundaryGap: true,
        axisLine: {
          show: false,
        }
      },
    ],
    yAxis: [
      {
        type: 'value',

        show: false,
      }
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barMaxWidth: 10,
        zlevel: 10,
        data: [160, 230, 265, 150, 220, 170, 190],
        label: {
          show: true,
          position: 'top',
          color: '#333333',
          fontSize: 12
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#3516E7'
            }, {
              offset: 1,
              color: '#fff'
            }]
          },
          borderRadius: [30, 30, 0, 0],
        },
      }
    ]
  };

  viewingData.setOption(option)
  // 响应式resize
  const resizeHandler = () => myChart.resize()
  window.addEventListener('resize', resizeHandler)
}

onMounted(() => {
  initEcharts()
  initViewingData()
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
})


</script>
<style lang="scss" scoped>
.box-main {
  padding: 5.13rem 3.08rem;
  background: #F9F9F9;
  font-family: PingFang SC, PingFang SC;

  .box-title {
    font-weight: 500;
    font-size: 4.1rem;
    color: #3D3D3D;
    line-height: 5.64rem;
    margin-bottom: 2.13rem;
  }

  .m-b-5 {
    margin-bottom: 5.13rem;
  }

  .card {
    background: #FFFFFF;
    border-radius: 3.08rem;
    padding: 7.69rem 2.56rem 5.13rem;

    &-list {
      display: flex;
      justify-content: space-around;

      &-item {
        text-align: center;

        &-value {
          font-family: Roboto, Roboto;
          font-weight: 700;
          font-size: 6.15rem;
          color: #333333;
          line-height: 8.72rem;
        }

        &-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 3.08rem;
          color: #999999;
          line-height: 4.36rem;
          margin-top: 1.54rem;
        }
      }
    }

    &-tabs {
      display: flex;
      margin-top: 7.44rem;
      gap: 0 3.59rem;

      &-btn {
        background: #F4F4F4;
        border-radius: 3.33rem 3.33rem 3.33rem 3.33rem;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 3.08rem;
        color: #999999;
        padding: 1.03rem 2.56rem;
      }

      &-btn-active {
        background: #FBEBF0;
        color: #DC376B;
      }
    }
  }
}
</style>